<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta blitz-debugger="localhost">
    <meta name="viewport" content="width=1920">
    <title>index</title>
    <link rel="stylesheet" href="./css/base.css"/>
    <link rel="stylesheet" href="./css/song.css"/>
</head>
<body fe-role="Switch" style="width: 1920px; height: 1280px; background-color: #1c1f2b">
    <div id="song-detail" fe-role="Switch">
        <div class="song-right">
        <p class="album-list-title"></p>
        <div class="song-img-wrap index1" id="song-right-index1" fe-role="Widget">
            <img class="song-img" src="./img/play_last.png"/>
            <p class="song-right-tips">上一曲</p>
        </div>

        <div class="song-img-wrap index2" id="song-right-index2" fe-role="Widget">
            <img class="song-img" src="./img/play_play.png"/>
            <p class="song-right-tips">播放</p>
        </div>

        <div class="song-img-wrap index3" id="song-right-index3" fe-role="Widget">
            <img class="song-img" src="./img/play_next.png"/>
            <p class="song-right-tips">下一曲</p>
        </div>

        <div class="song-img-wrap index4" id="song-right-index4" fe-role="Widget">
            <img class="song-img" src="./img/play_mode_list.png"/>
            <p class="song-right-tips">播放模式</p>
        </div>

        <div class="song-img-wrap index5" id="song-right-index5" fe-role="Widget">
            <img class="song-img" src="./img/play_fave.png"/>
            <p class="song-right-tips">单曲收藏</p>
        </div>

        <div class="progress-bar">
            <div class="progress-background"></div>
            <div class="progress-preground"></div>
            <div class="progress-preground-circle"></div>
            <p class="current-time">00:00</p>
            <p class="duration">03:12</p>
        </div>
    </div>
        <div class="lyric-view-small"></div>
    </div>

    <script src="js/LogUtil.js"></script>
    <script src="../../../FocusEngine.js"></script>
    <script src="js/zepto.js"></script>
    <script src="es5/AudioPlayer.js"></script>
    <script src="es5/LyricView.js"></script>
    <script src="es5/lrcData.js"></script>
    <script>
//        import AudioPlayer from './js/AudioPlayer';
        window.onload = function(){
            var root = FocusEngine.render();
            console.log('------------------- onload -----------------');
            window.audioPlayer = new AudioPlayer();
            window.lyricView = new LyricView($('.lyric-view-small').get(0));
            /*--------------监听播放事件，回传currentSong对象 + type */
            var callback1 = window.audioPlayer.on('updatesong', function(data){
                console.log(data);
                window.lyricView.updateNoLyric('正在获取歌词');
                setTimeout(function(){
                    window.lyricView.refresh(window.testData);
                }, 3000);
            });
            var callback1 = window.audioPlayer.on('timeupdate', function(data){
//                console.log(data);
                var song = data.currentSong;
                var duration = song.duration != undefined ? song.duration : 100;
                var currentTime = song.currentTime != undefined ? song.currentTime : 0;
                var percent = currentTime / duration;
                var width = Math.floor(750 * percent);
                $('.duration').get(0).textContent = song.durationStr;
                $('.current-time').get(0).textContent = window.audioPlayer.getTime(currentTime * 1000);
                $('.progress-preground').get(0).style.width = width + 'px';
                $('.progress-preground-circle').get(0).style.left = (width - 20) + 'px';
                window.lyricView.scrollLrc(currentTime);
            });

            /*设置数据源*/
            var dataSrc = [{name:'test1',id:'100001',listenurl:'./test1.mp3',lyric:'http:///ssss1'},
                {name:'test2',id:'100002',listenurl:'./test2.mp3',lyric:'http:///ssss2'},
                {name:'test3',id:'100003',listenurl:'./test1.mp3',lyric:'http:///ssss3'},
                {name:'test4',id:'100004',listenurl:'./test2.mp3',lyric:'http:///ssss4'},
                {name:'test5',id:'100005',listenurl:'./test1.mp3',lyric:'http:///ssss5'}];
            window.audioPlayer.setDataSrc(dataSrc);

            /*---------------------按键事件----------------------*/
            root.on('keydown',function(e){
               if(e.keyCode == 13) {
                   if(e.target.id == "song-right-index1"){
                       window.audioPlayer.playLast();
                   } else if (e.target.id == "song-right-index2"){
                       window.audioPlayer.togglePlay();
                   } else if (e.target.id == "song-right-index3"){
                       window.audioPlayer.playNext();
                   } else if (e.target.id == "song-right-index4"){
                       //这里也可以setPlayMode
                       var playMode = window.audioPlayer.togglePlayMode();
                       var node = document.getElementById('song-right-index4');
                       var image = node.querySelector('.song-img');
                       var url = './img/play_mode_' + playMode + '.png';
                       Log('url === ' + url);
                       image.setAttribute("src", url);
                   }
               }
            });
        }
    </script>
</body>
</html>
